<!--题目条目，单个或多个展示-->
<style>
  .testpaper-question-choices .choice-opt {
    margin-right: 5px;
  }
  .que-look * {
    color: #919191;
  }
  .footer_input label.radio-inline {
    padding: 8px 20px 8px 30px;
    display: inline-block;
  }
  .footer_input label.radio-inline:hover {
    background-color: #eee;
  }
  .stem-box {
    margin: 0 50px;
    position: relative;
  }
  .stem-box .testpaper-question-stem {
    padding-right: 40px;
  }
  .stem-box .right {
    position: absolute;
    right: 2px;
    top: -1px;
  }
  .stem-box .right span {
    color: #fff!important;
  }
  .type-1 {
    padding-left: 10px!important;
  }
</style>
<div class="que-look">
  <div class="testpaper-question-choice">
    <div class="testpaper-question-body">
      <div class="stem-box clearfix">
        <!--题干-->
        <div class="testpaper-question-stem">
          <div><span style="color: black; font-weight: bolder;">题干：</span>
            {{practice.stem}}
          </div>
        </div>
        <div class="right" v-html="difs(practice.difficulty)"></div>
      </div>
      <!--选项列表-->
      <ul v-if="practice.type<2" class="testpaper-question-choices">
        <li v-for="opt in practice.options">
          <span class="choice-opt">{{getOptLetter(opt.option)}}.</span>
          <span class="choice-content">{{opt.result}}</span>
        </li>
      </ul>
    </div>
    <!--选项选择-->
    <div v-if="practice.type<2" class="testpaper-question-footer clearfix">
      <div class="footer_input">
        <label v-for="(opt,i) in practice.options" :class="'radio-inline type-'+practice.type">
          <input v-if="practice.type==0" type="radio" name="single_choice" value="1">
          <input v-if="practice.type==1" type="checkbox" name="multipart_choice" value="1">
          {{getOptLetter(i)}}
        </label>
      </div>
    </div>
  </div>

  #if(modal == 1)
  <!--答案和解析-->
  <div class="testpaper-question">
    <!--正确答案--> <!--单选 多选 问答-->
    <div v-if="practice.type==0" class="testpaper-preview-answer clearfix mtl mbl">
      <div class="testpaper-question-result">
        正确答案是: <strong class="color-success">{{getOptLetter(practice.option)}}</strong>
      </div>
    </div>
    <div v-if="practice.type==1" class="testpaper-preview-answer clearfix mtl mbl">
      <div class="testpaper-question-result">
        正确答案是:
        <template v-for="(opt, index) in practice.options" >
          <strong v-if="opt.right==1" class="color-success">
            {{getOptLetter(index)}}
          </strong>
        </template>
      </div>
    </div>
    <div v-if="practice.type==2" class="testpaper-preview-answer clearfix mtl mbl">
      <div class="testpaper-question-result">
        <span style="color: black; font-weight: bolder;">答案：</span>
        {{practice.options[0].result}}
      </div>
    </div>
    <!--解析-->
    <div class="testpaper-question-analysis js-testpaper-question-analysis">
      <div class="well mb0">
        {{practice.analysis||'无解析'}}
      </div>
    </div>
  </div>
  <!--模态框控制-->
  <div class="modal-footer-inline">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  </div>
  #end
</div>
<script>
  var qvm = new Vue({
    el: '.que-look',
    data: {
      practice: {}
    },
    methods: {
      getOptLetter: function (index) {
        var number = "A".charCodeAt();
        return String.fromCharCode(number + parseInt(index));
      },
      difs: function (v) {
        if (v===0) return '<span class="label label-info">简单</span>';
        if (v===1) return '<span class="label label-warning">普通</span>';
        if (v===2) return '<span class="label label-danger">困难</span>';
      }
    },
    created: function () {
      var self = this;
      if (praVm != null) {
        self.practice = praVm.practice;
      } else {
        $.post('/course/practice/api/one/${preId}', function (data) {
          self.practice = data.payload;
        });
      }
    }
  });
</script>